<template>
  <div>

    <div>
      <div class="block">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in shoppingshow" :key="item.id">
            <a :href="item.a">
              <img :src="item.image" style="width: 1500px; height: 500px">
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>


    <div class="goodsBox">
      <div class="Books">
        <div class="BooksTitle">
          <h3>图书</h3>
        </div>
        <div class="BooksItemBox">
          <el-card class="goodsbooksItem" v-for="item in goods" :key="item.id" @click.native="getShopDetail(item)">
            <img class="goodsImg" :src="item.goodsImgUrl">
            <div class="goodsPrrice">
              <i class="fa fa-jpy"></i> <span>{{ item.price }}</span>
            </div>
            <div class="goodsName">
              <span>{{ item.name }}</span>
            </div>
            <div class="goodsSales">
              销售额
              <span>{{ item.sales }}</span>
            </div>
            <div class="goodsBut">
              <el-button type="danger" size="mini" @click.stop="addGoodsShop(item.id)">加入购物车</el-button>
            </div>
          </el-card>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
// import bus from '@/bus.js'
// import { query } from 'express'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  data() {
    return {
      shoppingshow: [{
        id: 1,
        a: "",
        image: require("../../assets/show/shoppingshow1.jpg")
      },
      {
        id: 2,
        a: "",
        image: require("../../assets/show/shoppingshow2.jpg")
      },
      {
        id: 3,
        a: "",
        image: require("../../assets/show/shoppingshow3.jpg")
      },
      {
        id: 4,
        a: "",
        image: require("../../assets/show/shoppingshow4.jpg")
      }],
      goods: [],
      shopcartlist: [],


      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}, //获取用户
    }
  },
  created() {
    this.getGoods()
    this.getShopCart()
  },
  methods: {
    //获取购物车商品数据
    getShopCart() {
      const userId = this.user.id
      this.$API.getGoodsCart(userId).then(res => {
        if (res.code === "200") {
          this.shopcartlist = res.data
        }
        console.log(this.shopcartlist);
      })
    },
    //获取所有商品
    getGoods() {
      this.$API.getGoods().then(res => {
        if (res.code === "200") {
          // console.log(res.data)
          this.goods = res.data
        }
      })
    },
    //点击加入商品详情页面
    getShopDetail(item) {

      // this.$router.replace({
      //   name: "Shopdetail",
      //   params: {
      //     id: item.id
      //   }
      // })
      this.$router.push(`/shopdetail/${item.id}`)

    },
    async addGoodsShop(goodsId) {


      // console.log(goosId);
      this.getShopCart();
      var flag = false;
      var goodsItem;

      this.shopcartlist.forEach((item) => {
        if (goodsId == item.goodsId) {
          flag = true;
          goodsItem = item;

        }
      })
      console.log(flag);


      const userId = this.user.id
      if (flag) {
        //该商品已经存在取出当前id使其
        this.$confirm('该商品已经存在您的购物车内了, 是否继续添加?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$API.addGoodsCart({
            id: goodsItem.id,
            userId: userId,
            goodsId: goodsId,
            quantity: goodsItem.quantity + 1
          }).then(res => {
            if (res.code === "200") {
              this.$notify({
                title: '商品+1',
                message: '恭喜你添加成功',
                offset: 100,
                type: "success"
              });
            } else {
              return this.$message.error(res.msg)
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });
        });

      } else {
        this.$API.addGoodsCart({
          userId: userId,
          goodsId: goodsId
        }).then(res => {
          if (res.code === "200") {
            return this.$message.success("添加成功")
          } else {
            return this.$message.error(res.msg)
          }

        })

      }

      //传给父路由购物车的商品数
      this.getShopCart();
      this.$emit('shopCount', this.shopcartlist.length)


      //判断是否发送成功
      // console.log(res);
      // if (res.code === "200") {
      //   return this.$message.success(res.msg)
      // } else {
      //   return this.$message.error(res.msg)
      // }

    },

  }

}

</script>

<style scoped lang="less">
.goodsBox {
  margin-top: 50px;
}

.BooksItemBox {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  //background: #99a9bf;
}

.BooksTitle {
  font-size: 30px;
}

.goodsbooksItem {
  margin-top: 20px;
  width: 260px;
  height: 420px;
  display: inline-block;
  text-align: center;
  /* css3效果过渡 */
  transition: all .2s linear;

  .goodsImg {
    width: 200px;
    height: 200px;
  }

  .goodsPrrice {
    margin-top: 20px;
    font-size: 15px;
    color: red;
  }

  .goodsPrrice span {
    font-size: 25px;
  }

  .goodsName {
    margin-top: 10px;
    height: 40px;
    font-size: 10px;
  }

  .goodsName span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }

  .goodsSales {
    font-size: 15px;
    color: #a3a3a3;
  }

  .goodsSales span {
    color: #3978e4;
  }

  .goodsBut {
    margin-top: 10px;
  }
}

.goodsbooksItem:hover {
  /* 盒子阴影 */
  box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
  /* 盒子向上移动效果，改变上外边距 */
  margin-top: 8px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>